<template>
  <div class="conMain" >
    <el-card  class="box-card" >
      <div slot="header" class="topfix">
          <div style="">
            <el-button v-has="'auth/group/add'" type="primary" size="mini" class="addBtn" @click="add()"><i class="el-icon-plus" /> 添加部门</el-button>
          </div>
      </div>
        <el-table v-loading="loading"  :data="list" style="width: 100%;margin-bottom: 20px;" :empty-text='emtypetxt' >
            <el-table-column prop="id" label="ID" align="center" width="100" />
            <el-table-column prop="pid" label="上级" align="center" width="300" />
            <el-table-column prop="name" label="名称" align="left"  width="200"/>

            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 'normal'" type="success" size="mini" disable-transitions>正常</el-tag>
                <el-tag v-if="scope.row.status === 'hidden'" type="info" size="mini" disable-transitions>禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间" align="center"  />
            <el-table-column label="操作" align="center" >
              <template slot-scope="scope">
                  <el-button v-if="scope.row.ishow" v-has="'auth/group/edit'" type="primary" size="mini" icon="el-icon-edit" title='编辑' plain   @click="edit(scope.row.id)"></el-button>
                  <el-button v-if="scope.row.ishow" v-has="'auth/group/del'"  type="danger" size="mini" icon="el-icon-delete" title='删除' plain  @click="del(scope.row.id)"></el-button>
              </template>
            </el-table-column>
        </el-table>

    </el-card>
    <el-dialog :title="sub.id==0?'添加部门':'编辑部门'"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    center  width="550px">
      <el-form ref="groupForm" :model="sub" :rules="rules" label-width="110px" class="dialogForm">
        <el-form-item label="上级部门" prop="pid">
          <el-select  v-model="sub.pid"   placeholder="请选择部门" @change="changepid">
            <el-option
              v-for="(item,index) in gplist"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="名称" prop="name" >
          <el-input v-model="sub.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="权限" prop="">
         <el-checkbox @change="selall" :true-label='1' :false-label='0' >选中全部</el-checkbox>
          <el-checkbox @change="zkall" :true-label='1' :false-label='0'>展开全部</el-checkbox>
        <el-tree
          :data="rulelist"
          show-checkbox
          :default-expanded-keys="ruleopen"
          :default-checked-keys="sellist"
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
          :default-expand-all='zk'
          empty-text=''
          >
        </el-tree>
        </el-form-item>
        <el-form-item label="状态" prop="status" >
            <el-radio-group v-model="sub.status"  @change="changeStatus">
              <el-radio label="normal">正常</el-radio>
              <el-radio label="hidden">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCalcel">取 消</el-button>

        <el-button size="medium" type="primary" @click="subForm('groupForm')">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { group_index,group_add,group_add_post,group_edit,group_edit_post,group_del,group_roletree } from '@/api/auth'

export default {
  data() {
    return {
      checked:true,
      rulelist:[],
      sellist:[],
      ruleopen:[],
      currentRuleIds:[], //全部的节点
      zk:false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogVisible: false,
      loading:true,
      emtypetxt:'',
      list: [],
      gplist:[],
      sub:{
        id:0,
        pid:'',
        name:'',
        rules:[],
        status:'normal',
      },
      rules: {
          pid: [
              { required: true, message: '请选择上级部门', trigger: 'blur' },
          ],
          name: [
              { required: true, message: '名称不能为空', trigger: 'blur' },

          ],
      },
    }
  },
  created() {
    this.grouplist()
  },
  methods: {
    //列表
    grouplist() {
      this.emtypetxt='加载中...';
      this.loading=true;
      group_index().then(res => {
        this.list=res.data.list
        this.loading = false
        if(this.list.length==0){
          this.emtypetxt='暂无数据'
        }
      })
    },
    //权限树
    getrulelist(id=''){
      this.rulelist=[];
      group_roletree({pid:this.sub.pid,id:id}).then(res => {
          this.rulelist=res.data.rulelist
          this.sellist=res.data.sellist
          this.ruleopen=res.data.ruleopen
          this.currentRuleIds=res.data.currentRuleIds
      })
    },
    //改变上级部门
    changepid(val){
      this.sub.pid=val
      this.getrulelist()
    },

    //添加
    add(){
      this.sub.id=0;
      this.resetForm('groupForm');
      group_add().then(res => {
            this.gplist=res.data.groupdata;
            if(this.gplist['0'].id){
              this.sub.pid=this.gplist['0'].id
              this.getrulelist()
            }
            this.dialogVisible=true;
      })
    },
    //编辑
    edit(id){
      this.resetForm('groupForm');
      group_edit({id:id}).then(res => {
              this.gplist=res.data.groupdata
              let row=res.data.row
              this.sub.pid=row.pid
              this.sub.id=row.id
              this.sub.name=row.name
              this.sub.status=row.status
              this.dialogVisible=true;
              this.getrulelist(row.id)

      })
    },
    // 切换状态
    changeStatus(val) {
      this.sub.status = val
    },
    //重置表单
    resetForm(formName)
    {
       if (this.$refs[formName]!==undefined) {
          this.$refs[formName].resetFields();
       }
    },
    // 取消
    handleCalcel() {
      this.dialogVisible = false
    },
    //提交
    subForm(formName) {
        this.$refs[formName].validate((valid) => {
          this.sub.rules=this.$refs.tree.getCheckedKeys();
            if (valid) {
              if(this.sub.id>0){
                group_edit_post(this.sub).then(res => {
                    this.$message.success(res.msg);
                    this.dialogVisible = false
                    this.grouplist()
                })
              }else{
                group_add_post(this.sub).then(res => {
                    this.$message.success(res.msg);
                    this.dialogVisible = false
                    this.grouplist()
                })
              }
            } else {
              return false;
            }
        });
    },
    del(id){
      let _this=this;
      _this.$modalSure().then(() => {
        group_del({id:id}).then(res => {
          if (res.code === 1) {
            _this.$message.success(res.msg);
            _this.grouplist()
          }
        })
      })

    },
    selall(val){
      if(val==1){
         this.$refs.tree.setCheckedKeys(this.currentRuleIds);
      }else{
          this.$refs.tree.setCheckedKeys([]);
      }
    },
    zkall(val){
      if(val==1){
          this.ruleopen=this.currentRuleIds
      }else{
        this.getrulelist()
      }
    }
  },
}
</script>
<style lang="scss" scoped>
</style>
